.chat-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.you .message {
   display: flex; /* 使用flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
  align-items: flex-end; /* 子元素靠右对齐 */
  margin-bottom: 10px;
}

.triangle_left {
  align-self: flex-start; /* 靠左对齐 */
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #ededed; /* 左边三角形颜色，指向右边 */
}

.triangle_right {
  align-self: flex-end; /* 靠右对齐 */
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #4caf50; /* 右边三角形颜色，指向左边 */
}

.left_message,
.right_message {
  max-width: 60%;
  padding: 10px;
  border-radius: 10px;
  color: #000;
  line-height: 20px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.left_message {
  background-color: #ededed;
}

.right_message {
  background-color: #4caf50;
  color: #fff;
}

.chat-input {
  display: flex;
  padding: 10px;
}

.chat-input input {
  flex: 1;
  margin-right: 10px;
  padding: 5px;
}

.chat-input button {
  padding: 5px 10px;
}
 